<template>
  <div class="sliderassembly">
    <el-collapse v-model="activeNames">
      <el-collapse-item
        v-for="(items, index) in datas"
        :key="index"
        :title="items.title"
        :name="index + 1">
        <div
          v-for="(item, ind) in items.comList"
          :key="ind"
          class="componList"
          :draggable="item.draggable"
          :data-name="item.name"
          @dragstart="drag($event)"
          @dragend="dragends($event)">
          <!-- <van-icon :name="item.vanIcon" /> -->
          <img :src="item.icon" class="iconimg" draggable="false" alt="" />
          <p>{{ item.text }}</p>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: "Sliderassembly",
  props: {
    pointer: Object,
    type: String,
  },
  data() {
    return {
      activeNames: [1, 2, 3, 4] /* 侧边栏组件显示 */,
      datas: [
        {
          title: "基础组件",
          comList: [
            {
              text: "头部信息",
              type: "1-1",
              icon: require("../../assets/img/icon01.png"),
              name: "headerinformation",
              draggable: false,
            },
            {
              text: "底部导航",
              type: "1-2",
              icon: require("../../assets/img/icon02.png"),
              name: "tabBar",
              draggable: false,
            },
            {
              text: "一级栏目",
              type: "1-3",
              icon: require("../../assets/img/icon03.png"),
              name: "optioncard",
              draggable: false,
            },
            {
              text: "轮播图",
              type: "1-4",
              icon: require("../../assets/img/icon04.png"),
              name: "bannerlist",
              draggable: false,
            },
            {
              text: "金刚区",
              type: "1-5",
              icon: require("../../assets/img/icon05.png"),
              name: "kingkongarea",
              draggable: false,
            },
            {
              text: "学科入口",
              type: "1-6",
              icon: require("../../assets/img/icon06.png"),
              name: "subjectentry",
              draggable: false,
            },
            {
              text: "运营位",
              type: "1-7",
              icon: require("../../assets/img/padicon12.png"),
              name: "operationPlace",
              draggable: false,
            },
            {
              text: "消息通知",
              type: "1-8",
              icon: require("../../assets/img/icon13.png"),
              name: "messageComponent",
              draggable: false,
            },
            {
              text: "我的应用",
              type: "1-9",
              icon: require("../../assets/img/icon16.png"),
              name: "applicationarea",
              draggable: false
            },
            {
              text: "web容器",
              type: "1-10",
              icon: require("../../assets/img/padicon06.png"),
              name: "webplaceholder",
              draggable: false
            }
          ],
        },
        {
          title: "分类标题",
          comList: [
            {
              text: "分类标题一",
              type: "2-1",
              icon: require("../../assets/img/icon07.png"),
              name: "primarygradesort",
              draggable: false,
            },
            {
              text: "分类标题二",
              type: "2-2",
              icon: require("../../assets/img/icon08.png"),
              name: "categoryTitleTwo",
              draggable: false
            },
          ],
        },
        {
          title: "内容模板",
          comList: [
            {
              text: "内容版式",
              type: "3-1",
              icon: require("../../assets/img/icon12.png"),
              name: "leftrightformat",
              draggable: false,
            },
            // {
            //   text: "内容动态组件",
            //   type: "3-2",
            //   icon: "icon-mofang",
            //   name: "dynamicomponent",
            // },
            {
              text: "免费同步",
              type: "3-3",
              icon: require("../../assets/img/icon10.png"),
              name: "synchronouspew",
              draggable: false,
            },
            {
              text: "同步教材",
              type: "3-4",
              icon: require("../../assets/img/padtbpy.png"),
              name: "newSynchronouspew",
              draggable: false,
            },
            {
              text: "同步铺开",
              type: "3-5",
              icon: require("../../assets/img/icon10.png"),
              name: "synchronouSpread",
              draggable: false
            },
          ],
        },
        {
          title: "运营组件",
          comList: [
            {
              text: "主题介绍",
              type: "4-1",
              icon: require("../../assets/img/icon11.png"),
              name: "themeIntroduce",
              draggable: false,
            },
            {
              text: "视频宣传",
              type: "4-2",
              icon: require("../../assets/img/icon14-2.png"),
              name: "videoPromotion",
              draggable: false,
            },
            {
              text: "运营活动",
              type: "4-3",
              icon: require("../../assets/img/icon15-1.png"),
              name: "operateActivity",
              draggable: false
            },
            {
              text: "直播预告",
              type: "4-4",
              icon: require("../../assets/img/icon09.png"),
              name: "livepreview",
              draggable: false
            },
            {
              text: "直播课表",
              type: "4-5",
              icon: require("../../assets/img/icon11.png"),
              name: "liveTimetable",
              draggable: false,
            },
          ],
        },
      ],
    };
  },
  methods: {
    /**
     * 当用户开始拖动元素或选择文本时触发此事件
     *
     * @param {Object} event event对象
     */
    drag(event) {
      /* 开启穿透 */
      this.pointer.show = true;
      /* 传递参数 */
      event.dataTransfer.setData("componentName", event.target.dataset.name);
    },

    /**
     * 当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件
     *
     * @param {Object} event event对象
     */
    dragends() {
      /* 关闭穿透 */
      this.pointer.show = false;
    },
  },
  created() {
    if (this.type == "tabbar") {
      this.datas[0].comList[1].draggable = true;
    }
    if (this.type == "home") {
      this.datas[0].comList[0].draggable = true;
      this.datas[0].comList[2].draggable = true;
    }
    if (this.type != "tabbar" && this.type != "home") {
      for (let i = 0; i < this.datas.length; i++) {
        for (let j = 0; j < this.datas[i].comList.length; j++) {
          this.datas[i].comList[j].draggable = true;
        }
      }
    }
  },
};
</script>

<style scoped lang="scss">
/* 组件 */
.sliderassembly {
  width: 275px;
  height: 100%;
  overflow-y: scroll;
  border-right: 1px solid #ebedf0;
  box-sizing: border-box;
  padding: 0 12px;
  background: #fff;
  /* 滚动条 */
  &::-webkit-scrollbar {
    width: 1px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #155bd4;
  }
  .el-collapse-item__header,
  .el-collapse-item__wrap {
    border-bottom: 0 !important;
  }

  /* 组件列表 */
  .componList {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    width: 80px;
    height: 88px;
    margin-bottom: 8px;
    align-items: center;
    cursor: all-scroll;
    transition: all 0.3s;
    &:hover {
      background: #155bd4;
      border-radius: 2px;
      font-weight: 700;
      i,
      p,
      span {
        color: #fff;
      }
    }
    /* 图标 */
    i {
      font-size: 32px;
      width: 32px;
      height: 32px;
      line-height: 32px;
      color: #b0a8a8;
      margin-top: 4px;
    }
    /* 标题 */
    p {
      font-size: 12px;
      color: #323233;
      margin-top: 4px;
    }
    /* 数量 */
    span {
      color: #7d7e80;
      margin-top: 4px;
      font-size: 10px;
    }
  }
  .iconimg {
    width: 60px;
    height: 40px;
    -webkit-user-drag: none;
  }
}
</style>
